<template>
  <span style="display: inline-block;text-align: left;">
    <!-- 修改 - btn -->
    <el-tooltip content="查看详情" placement="top">
      <el-button type="success" size="small" style="margin-top: 10px" @click="clickToView">查看详情</el-button>
    </el-tooltip>
    <el-dialog :visible.sync="dialogTableVisible" width="70%" title="查看详情" @close="close">
      <el-card>
        <h2>基本信息</h2>
        <table style="width: 100%;">
          <tr>
            <td style="width: 100px;">商家名称</td>
            <td style="width: 200px">{{ row_data.merchant_name }}</td>
            <td style="width: 100px;">公司名称</td>
            <td style="width: 400px">{{ row_data.company_name }}</td>
            <td style="width: 100px;">品牌名称</td>
            <td style="width: 400px">{{ row_data.brand_name }}</td>
          </tr>
          <tr>
            <td style="width: 100px;">品牌图片</td>
            <td style="width: 200px">
              <span v-if="row_data.brand_image">
                <img :src="row_data.brand_image" width="180px" alt="品牌图片" @click="bigImage(row_data.brand_image)">
              </span>
              <span v-else>暂无图片</span>
            </td>
            <td style="width: 100px;">注册时间</td>
            <td>{{ row_data.regtime | formatDate1 }}</td>
            <td style="width: 100px;">添加时间</td>
            <td>{{ row_data.create_time | formatDate }}</td>
          </tr>
          <tr>
            <td style="width: 100px">联系人</td>
            <td style="width: 200px">{{ row_data.real_name }}</td>
            <td style="width: 100px">联系电话</td>
            <td style="width: 100px">{{ row_data.mobile_no }}</td>
            <td style="width: 100px">办公地址</td>
            <td style="width: 100px">{{ row_data.business_address }}</td>
          </tr>
          <tr>
            <td style="width: 150px">身份证正面照</td>
            <td style="width: 200px">
              <span v-if="row_data.id_card_front">
                <img :src="row_data.id_card_front" width="200px" alt="身份证正面照" @click="bigImage(row_data.id_card_front)">
              </span>
              <span v-else>暂无图片</span>
            </td>
            <td style="width: 150px">身份证反面照</td>
            <td style="width: 200px">
              <span v-if="row_data.reverse_of_id_card">
                <img :src="row_data.reverse_of_id_card" width="200px" alt="身份证反面照" @click="bigImage(row_data.reverse_of_id_card)">
              </span>
              <span v-else>暂无图片</span>
            </td>
            <td style="width: 150px">营业执照</td>
            <td style="width: 200px">
              <span v-if="row_data.business_license">
                <img :src="row_data.business_license" width="200px" alt="营业执照" @click="bigImage(row_data.business_license)">
              </span>
              <span v-else>暂无图片</span>
            </td>
          </tr>
          <tr>
            <td style="width: 100px">基本信息</td>
            <td colspan="5">
              <span v-if="row_data.basic_info">{{ row_data.basic_info | cutOutString }}</span>
              <span v-else>暂无</span>
            </td>
          </tr>
        </table>
      </el-card>
      <br>
      <el-card>
        <h2>基本简介</h2>
        <div style="width: 100%;height: auto;" v-html="row_data.intro">
          <span v-if="!row_data.intro">暂无详情</span>
        </div>
      </el-card>
      <!--大图弹窗-->
    </el-dialog>
  </span>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
// import store from '@/store'
import { parseTime } from '@/utils/index'
export default {
  name: 'ProductDetails',
  directives: { elDragDialog },
  filters: {
    cutOutString: function(val) {
      if (!val) {
        return ''
      } else if (val.length > 800) {
        return val.substring(0, 800) + '......'
      } else {
        return val
      }
    },
    formatDate: function(time) {
      if (!time) {
        return ''
      }
      return parseTime(time)
    },
    formatDate1: function(time) {
      if (!time) {
        return ''
      }
      return parseTime(time, '{y}年{m}月{d}日')
    }
  },
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      bigImageSrc: null
    }
  },
  methods: {
    clickToView() {
      this.dialogTableVisible = true
      console.log('this.row_data', this.row_data)
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    },
    bigImage(src) {
      if (src.length > 0) {
        this.$set(this, 'bigImageSrc', src)
      } else {
        this.$set(this, 'bigImageSrc', null)
      }
    }
  }
}
</script>
<style scoped>
  table {
    border: 1px solid #AAAAAA;
    cellpadding:0px;
    cellspacing:0px;
    border-collapse: collapse;
  }
  table  td {
    border: 1px solid #AAAAAA;
  }
  tr td {
    text-align: center;
  }
</style>
